<template>
  <div class="content">
    <template>
      <div class="list" v-for="item in list" :key="item.id">
        <div class="count">{{item.number}}</div>
        <div class="name">{{item.name}}</div>
      </div>
    </template>

  </div>
</template>

<script>
import { keynoteListApi} from "@/api/statistics-1";

export default {
  name: "MapCount1",
  props:{
    title:{
      type:String,
      default:''
    },
    detail: {
      type:Object,
    },
    type: {
      type:Number,
    },
  },
  data(){
    return {
      list:[
        {id:2,color:['#5c6aff','#4a29d8'],name:'',icon:'icon-caishouzhongliang',number:0},
        {id:3,color:['#30cbf7','#1997e1'],name:'',icon:'icon-caishouzhongliang',number:0},
        {id:4,color:['#12f1b8','#0db5e6'],name:'',icon:'icon-caishouzhongliang',number:0},
        {id:5,color:['#f7c759','#fb838f'],name:'',icon:'icon-huoche',number:'0'},
        {id:6,color:['#f7c759','#fb838f'],name:'',icon:'icon-huoche',number:'0'},
        {id:7,color:['#f7c759','#fb838f'],name:'',icon:'icon-huoche',number:'0'},
        {id:8,color:['#f7c759','#fb838f'],name:'',icon:'icon-huoche',number:'0'},
      ]
    }
  },
  methods:{

    getMapDetail(){
      keynoteListApi({type:this.type}).then((res)=>{
        if(res.code===200){
          this.list[0].name = res.data[0].name
          this.list[0].number = res.data[0].value
          this.list[1].name = res.data[1].name
          this.list[1].number = res.data[1].value
          this.list[2].name = res.data[2].name
          this.list[2].number = res.data[2].value
          this.list[3].name = res.data[3].name
          this.list[3].number = res.data[3].value
          this.list[4].name = '瓜州'
          this.list[4].number = 0
          this.list[5].name = '玉门'
          this.list[5].number = 0
          this.list[6].name = '阿克赛'
          this.list[6].number = 0

        }
      })
    },
  },
  mounted() {
    this.getMapDetail()
  },
  computed:{
    thousands(){
      return typeof this.number==='number'?this.number.toLocaleString():this.number;
    }
  }
}
</script>

<style scoped lang="scss">
.content{
  width: 100%;
  padding: 30px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 30px;
  .list{
    border: 1px solid #0c1865;
    background: #164088;
    margin-right: 30px;
    padding: 20px 40px;
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: calc((100% - 90px)/3);
    margin-top: 20px;
    .count{
      color: #ffffff;
      font-size: 30px;
    }
    .name{
      color: #ffffff;
    }
  }
}
</style>
